<template>
    <div>

        <div style="margin-top: 10px">
            <el-table
                    :data="emps"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="正在加载..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    style="width: 90%">
                <el-table-column
                        prop="name"
                        fixed
                        align="left"
                        label="姓名"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="department.name"
                        width="100"
                        align="left"
                        label="所属部门">
                </el-table-column>
                <el-table-column
                        prop="position.name"
                        width="100"
                        label="职位">
                </el-table-column>
                <el-table-column
                        prop="jobLevel.name"
                        width="110"
                        label="职称">
                </el-table-column>
                <el-table-column
                        prop="engageForm"
                        width="100"
                        align="left"
                        label="聘用形式">
                </el-table-column>
                <el-table-column
                        prop="tiptopDegree"
                        width="80"
                        align="left"
                        label="最高学历">
                </el-table-column>
                <el-table-column
                        prop="beginDate"
                        width="110"
                        align="left"
                        label="入职日期">
                </el-table-column>
                <el-table-column
                        prop="conversionTime"
                        width="110"
                        align="left"
                        label="转正日期">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" effect="dark" v-if="scope.row.status===1">已审核</el-tag>
                        <el-tag type="danger" effect="dark" v-else>未审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="100"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="showEmpView(scope.row)" style="padding:8px" >详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="80%">
                <div>
                    <el-form :model="emp"  ref="empForm">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="姓名:" prop="name">
                                    <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit" v-model="emp.name"
                                              placeholder="请输入员工姓名"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="性别:" prop="gender">
                                    <el-radio-group v-model="emp.gender">
                                        <el-radio label="男">男</el-radio>
                                        <el-radio label="女">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="出生日期:" prop="birthday">
                                    <el-date-picker
                                            v-model="emp.birthday"
                                            size="mini"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            style="width: 150px;"
                                            placeholder="出生日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="政治面貌:" prop="politicId">
                                    <el-select v-model="emp.politicId" placeholder="政治面貌" size="mini" style="width: 200px;">
                                        <el-option
                                                v-for="item in politicsstatus"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="民族:" prop="nationId">
                                    <el-select v-model="emp.nationId" placeholder="民族" size="mini" style="width: 150px;">
                                        <el-option
                                                v-for="item in nations"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="籍贯:" prop="nativePlace">
                                    <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                                              v-model="emp.nativePlace" placeholder="请输入籍贯"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="电子邮箱:" prop="email">
                                    <el-input size="mini" style="width: 150px" prefix-icon="el-icon-message"
                                              v-model="emp.email" placeholder="请输入电子邮箱"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="联系地址:" prop="address">
                                    <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"
                                              v-model="emp.address" placeholder="请输入联系地址"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="职位:" prop="posId">
                                    <el-select v-model="emp.posId" placeholder="职位" size="mini" style="width: 150px;">
                                        <el-option
                                                v-for="item in positions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="职称:" prop="jobLevelId">
                                    <el-select v-model="emp.jobLevelId" placeholder="职称" size="mini" style="width: 150px;">
                                        <el-option
                                                v-for="item in joblevels"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="所属部门:" prop="departmentId">
                                    <el-popover
                                            placement="right"
                                            title="请选择部门"
                                            width="200"
                                            trigger="manual"
                                            v-model="popVisible">
                                        <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                                 @node-click="handleNodeClick"></el-tree>
                                        <div slot="reference"
                                             style="width: 150px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box"
                                             @click="showDepView">{{inputDepName}}
                                        </div>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="电话号码:" prop="phone">
                                    <el-input size="mini" style="width: 200px" prefix-icon="el-icon-phone"
                                              v-model="emp.phone" placeholder="电话号码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="工号:" prop="workID">
                                    <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                              v-model="emp.workID" placeholder="工号" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="学历:" prop="tiptopDegree">
                                    <el-select v-model="emp.tiptopDegree" placeholder="学历" size="mini"
                                               style="width: 150px;">
                                        <el-option
                                                v-for="item in tiptopDegrees"
                                                :key="item"
                                                :label="item"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="毕业院校:" prop="school">
                                    <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                              v-model="emp.school" placeholder="毕业院校名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="专业名称:" prop="specialty">
                                    <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"
                                              v-model="emp.specialty" placeholder="请输入专业名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="入职日期:" prop="beginDate">
                                    <el-date-picker
                                            v-model="emp.beginDate"
                                            size="mini"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            style="width: 130px;"
                                            placeholder="入职日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="转正日期:" prop="conversionTime">
                                    <el-date-picker
                                            v-model="emp.conversionTime"
                                            size="mini"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            style="width: 130px;"
                                            placeholder="转正日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="合同起始日期:" prop="beginContract">
                                    <el-date-picker
                                            v-model="emp.beginContract"
                                            size="mini"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            style="width: 130px;"
                                            placeholder="合同起始日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="合同终止日期:" prop="endContract">
                                    <el-date-picker
                                            v-model="emp.endContract"
                                            size="mini"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            style="width: 150px;"
                                            placeholder="合同终止日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="身份证号码:" prop="idCard">
                                    <el-input size="mini" style="width: 180px" prefix-icon="el-icon-edit"
                                              v-model="emp.idCard" placeholder="请输入身份证号码"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="聘用形式:" prop="engageForm">
                                    <el-radio-group v-model="emp.engageForm">
                                        <el-radio label="劳动合同">劳动合同</el-radio>
                                        <el-radio label="劳务合同">劳务合同</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="婚姻状况:" prop="wedlock">
                                    <el-radio-group v-model="emp.wedlock">
                                        <el-radio label="已婚">已婚</el-radio>
                                        <el-radio label="未婚">未婚</el-radio>
                                        <el-radio label="离异">离异</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="doAddEmp(emp)" v-if="emp.status!=1">通过</el-button>
  </span>
            </el-dialog>



            <div style="display: flex;justify-content: flex-end">
                <el-pagination
                        :page-size="pagesize"
                        @current-change="currentChange"
                        layout="prev, pager, next,jumper,total"
                        :total="total">
                </el-pagination>
            </div>
        </div>

    </div>

</template>

<script>
    export default {
        name: "LuYong_review",
        data(){
            return{
                pagesize:5,
                title: '',
                importDataBtnText: '导入数据',
                importDataBtnIcon: 'el-icon-upload2',
                importDataDisabled: false,
                showAdvanceSearchView: false,
                allDeps: [],
                emps: [],
                loading: false,
                popVisible: false,
                popVisible2: false,
                dialogVisible: false,
                total: 0,
                page: 1,
                keyword: '',
                size: 5,
                nations: [],
                joblevels: [],
                politicsstatus: [],
                positions: [],
                tiptopDegrees: ['本科', '大专', '硕士', '博士', '高中', '初中', '小学', '其他'],
                inputDepName: '所属部门',
                emp: {
                    name: "",
                    gender: "",
                    birthday: "1989-12-31",
                    idCard: "610122199001011256",
                    wedlock: "已婚",
                    nationId: 1,
                    nativePlace: "陕西",
                    politicId: 13,
                    email: "laowang@qq.com",
                    phone: "18565558897",
                    address: "深圳市南山区",
                    departmentId: null,
                    jobLevelId: 9,
                    posId: 29,
                    engageForm: "劳务合同",
                    tiptopDegree: "本科",
                    specialty: "信息管理与信息系统",
                    school: "深圳大学",
                    beginDate: "2017-12-31",
                    workState: "在职",
                    workID: "00000057",
                    contractTerm: 2,
                    conversionTime: "2018-03-31",
                    notworkDate: null,
                    beginContract: "2017-12-31",
                    endContract: "2019-12-31",
                    workAge: null,
                    status:0,
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
            }
        },
        mounted() {
            this.initEmps();

        },
        methods: {
            emptyEmp() {
                this.emp = {
                    name: "",
                    gender: "",
                    birthday: "",
                    idCard: "",
                    wedlock: "",
                    nationId: 1,
                    nativePlace: "",
                    politicId: 13,
                    email: "",
                    phone: "",
                    address: "",
                    status:0,
                    departmentId: null,
                    jobLevelId: 9,
                    posId: 29,
                    engageForm: "",
                    tiptopDegree: "",
                    specialty: "",
                    school: "",
                    beginDate: "",
                    workID: "",
                    contractTerm: 2,
                    conversionTime: "",
                    notworkDate: null,
                    beginContract: "",
                    endContract: "",
                    workAge: null
                }
                this.inputDepName = '';
            },
            showEmpView(data) {
                console.log(data)
                this.dialogVisible=true;
                this.inputDepName = data.department.name;
                this.title = '查看员工信息';
                this.emp=data;
            },
            deleteEmp(data) {
                this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/employee/basic/" + data.id).then(resp => {
                        if (resp) {
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            doAddEmp(data) {
                this.putRequest('/employee/basic/changeStatus',data).then(resp=>{
                })
                this.dialogVisible=false;
                this.initEmps()
            },
            handleNodeClick(data) {
                this.inputDepName = data.name;
                this.emp.departmentId = data.id;
                this.popVisible = !this.popVisible
            },
            showDepView() {
                this.popVisible = !this.popVisible
            },
            showDepView2() {
                this.popVisible2 = !this.popVisible2
            },
            initPositions() {
                this.getRequest('/employee/basic/positions').then(resp => {
                    if (resp) {
                        this.positions = resp;
                    }
                })
            },
            getMaxWordID() {
                this.getRequest("/employee/basic/maxWorkID").then(resp => {
                    if (resp) {
                        this.emp.workID = resp.obj;
                    }
                })
            },

            sizeChange(currentSize) {
                this.size = currentSize;
                this.initEmps();
            },
            currentChange(currentPage) {
                this.page = currentPage;
                this.initEmps('advanced');
            },
            showAddEmpView() {
                this.emptyEmp();
                this.title = '添加员工';
                this.getMaxWordID();
                this.dialogVisible = true;
            },
            initEmps() {
                this.loading = true;
                let url = '/employee/basic/all/?page=' + this.page + '&size=' + this.size;
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        console.log(resp)
                        this.emps = resp.data;
                        this.total = resp.total;
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
